<template>
	<view>
		<!-- 返回 -->
		<view class="backs">
			<view @click="backlast()">
				<image src="../../static/back1.png"></image>
			</view>
		</view>
		<view class="container">
			<!-- 背景色区域 -->
			<view class="titleNview-background"
				style="background: url('../../static/wximg/bjTop1.png'); background-size: 100%;">
				<!-- 配送车辆-->
				<view class="text-box">
					<view style="max-width: 65%;">
						<view>线路名称：{{name}}</view>
						<view>商户名称：{{content}}</view>
						<view>商户地址：{{shopAddress}}</view>
						<view @tap="call(receiveTel)">商户电话：{{receiveTel}}</view>
					</view>
					<view v-if="buttonBeginShow">
						<button class="pesBtn" hover-class='pesBtn-hover' @click="beginDelivery()"
							type="primary">开始配送</button>
					</view>
					<view v-if="buttonShow">
						<!-- <button :class="classtype" @click="akey()" type="primary">一键装车</button>  saveTask   -->
						<!-- <button class="pesBtn" hover-class='pesBtn-hover' @click="dp()" type="primary" style="padding: 0 40upx;">调配</button> -->
						<button class="pesBtn" hover-class='pesBtn-hover' @click="handupdate()"
							type="primary">{{btnTxt}}</button>
					</view>
				</view>
			</view>
			<uni-pop ref="qxPop">
				<!-- <view class="popup-info">
					<navigator type="default" @click="close" class="close">
						<image :src="url+'/wximg/close.png'"></image>
					</navigator>
					<view class="popuptitle">异常签收处理</view>
					<view class="xinxiBox">
						<view class="uni-form-item uni-column" style="margin-bottom: 20rpx; border-bottom: solid 1px #eee;">
							<picker @change="bindPickerChange" :range="array">	
								<label style="color:#666"><text class="xxstart">*</text>状态：</label>
								<label class="">{{array[index]}}</label>
							</picker>
						</view>
					
						<view class="xinxiNr" style="border-bottom: solid 1px #eee;">
							<text style="color:#666"><text class="xxstart">*</text>备注：</text>
							<textarea  style="width:66%; padding:0 20rpx; height: 160rpx; "
							v-model="remark"></textarea>
						</view>
						<view class="btnPat">
							<button type="default" class="btn" @click="updatestatus">确认</button>
						</view>
					</view>
				</view> -->
				<view class="popup-info">
					<view type="default" @click="close" class="close">
						<image :src="url()+'/wximg/close.png'"></image>
					</view>
					<view class="popuptitle">上传验签图片</view>
					<form class="form">
						<view class="imgWra">
							<view class="xinxiNr" style="border-bottom: solid 1px #eee;">
								<text style="color:#666"><text class="xxstart">*</text>备注：</text>
								<textarea style="width:66%; padding:0 20rpx; height: 160rpx; "
									v-model="remark"></textarea>

							</view>

							<view class="spetext">请上传图片</view>
							<view @click="uploadImg" class="update">
								<image class="upImg" :src="abnormalImg" mode=""></image>
								<!-- <canvas canvas-id='photo_canvas' :style="'width:1000rpx;height:'+this.height+'px;'" class='myCanvas'></canvas> -->
								<canvas class="canvas" canvas-id="canvas"
									:style="{width:cWidth+'px',height:cHeight+'px', visibility: 'hidden', 'position':'absolute', 'z-index': '-1', left: '-10000rpx',top:'-10000rpx'}"></canvas>
							</view>
							<!-- <view  @click="uploadImg" class="content"  v-if="imgonshows==false">
								<image class="showImg" :src="imgArr" mode="" ></image>
							</view> -->

							<!-- <textarea v-show="showtextarea" v-model="exceptionDesc" class="reviewImg" focus="true"
								maxlength="-1" placeholder="请留下您的宝贵意见!" /> -->
						</view>

						<button @click.stop="openUpdate()" class="Confirm-delivery" hover-class='Confirm-delivery-hover'
							type="primary">确认修改</button>
					</form>
				</view>
			</uni-pop>

			<view class="wrapper" :style="{minHeight: heightContent+'px'}">
				<view v-for="(item,i) in contents" class="tableBox">
					<view class="tabletitle">配送详情</view>
					<view class="table">
						<view class="bgName">
							<text>包裹{{i+1}}</text>
							<text>包裹编码：<text>{{item.packageCode}}</text></text>
						</view>
						<wyb-table :key="key" show-vert-border="false" header-bg-color="#fff" first-col-bg-color="#fff"
							content-bg-color="#fff" height='342px' content-ft-color="#333333" :header-weight="true"
							border-color="#ffffff" ref="table" :headers="headers"
							:contents="item.deliveryPackageRowList" width="100%" :show-vert-border="vertborder"
							:loading="loading" :url-col="urlCol" @onCheck="onCheck" @onCellClick="onCellClick"
							@onButtonClick="onButtonClick" />
					</view>

				</view>
			</view>
			<!-- 查看异常图片 -->
			<popupConfirm ref="tableConfirm">
				<view class="popup-info">
					<view type="default" @click="close" class="close">
						<image :src="url()+'/wximg/close.png'"></image>
					</view>
					<view class="popuptitle">异常图片</view>
					<form class="form">
						<view class="uni-list-cell" style="line-height: 90rpx;">
							<view class="uni-list-cell-left">状态</view>
							<view class="uni-list-cell-db">
								<text>异常</text>
							</view>
						</view>
						<view class="uni-list-cell" style="line-height: 90rpx;">
							<view class="uni-list-cell-left">异常内容</view>
							<view class="uni-list-cell-db">
								<text>{{errerTypeText.exceptionCode}}</text>
							</view>
						</view>
						<view v-if="errerTypeText.exceptionDescShow" class="uni-list-cell" style="line-height: 90rpx;">
							<text style=" padding: 0 30rpx;">{{errerTypeText.exceptionDesc}}</text>
						</view>
						<view class="imgWra">
							<view class="up-check">
								<image :src="imgurl"></image>
							</view><!-- mode="widthFix" -->
						</view>
					</form>

				</view>
			</popupConfirm>
		</view>
	</view>
</template>

<script>
	// 表格
	import wybTable from '@/components/wyb-table/wyb-table.vue'
	import service from '../../service.js';
	import url from '@/api/url.js';
	import {
		selectShopPackage,
		dictionaryList,
		undateTaskImg,
		uploadBaseImage
	} from '@/api/request.js';
	import {
		beginDelivery
	} from '@/api/request.js';
	//原版配送员手动处理异常
	//import {updatestatus} from '@/api/request.js';
	import {
		pathToBase64, //图片路径转base64
		base64ToPath, //base64码转图片
	} from '@/common/image-tools/index.js';
	export default {
		components: {
			// 表格
			wybTable
		},
		data() {
			const theUrl = '/pages/demos/noticeBar-demo/more' // 本地的某个页面
			const httpUrl = 'https://ext.dcloud.net.cn/plugin?id=2667' // 某个网址
			return {
				btnTxt: "开始验签",
				content: "",
				url: url,
				//获取高度
				heightContent: '',
				// 配送车牌号码
				name: '吉A581k2',
				// 包裹编号
				packageCode: '2020041532568',
				//表格
				key: 0,
				bv: 0,
				imgurl: url() + '/wximg/confirm.jpg',
				abnormalImg: url() + '/wximg/add2.png',
				errerTypeText: {
					exceptionCode: "",
					exceptionDescShow: false,
					exceptionDesc: ""
				},
				dictionaryList: [],
				buttonShow: false,
				buttonBeginShow: false,
				headers2: [],
				contents2: [],
				array: ['--请选择--', '未送达', '已送达'],
				index: 0,
				remark: '',
				height: 0,
				longitude: '',
				latitude: '',
				taskDId: '',
				imageUrl: '',
				shopId: '',
				loading: true,
				vertborder: false, //金融竖向条,但是不能去除头部

				cWidth: 2000,
				cHeight: 2000,
				mapCtx: {},
				imgFiles: [],
				compressImgs: [],

				// 表格数据
				headers: [{
					label: '品名',
					key: 'commodityName',
					width: 220
				}, {
					label: '总数',
					key: 'numtext',
					width: 160
				}, {
					label: '状态',
					key: 'commodityStatusName',
					width: 130
				}, {
					label: '操作',
					key: 'look',
					width: 130
				}],
				contents: [],
				urlCol: [{
						type: 'route',
						key: '1'
					}, {
						type: 'http',
						key: 'url'
					},
					{
						type: 'button',
						key: 'look'
					}
				],
				receiveTel: "",
				shopAddress: "",
				i: -1, //用于缓存数据查询数据
				showtextarea: false
			};
		},
		onLoad(options) {
			getApp().globalData.ifTaskTimer = false
			// console.log("$$$$$$$$", options)
			this.content = options.content
			this.receiveTel = options.receiveTel
			this.shopAddress = options.shopAddress
			this.i = options.i

			let json = JSON.parse(decodeURIComponent(options.data));
			let deliveryStatus = json.e.lineData.deliveryStatus;
			this.bv = deliveryStatus;


			if (deliveryStatus == 1) {
				this.buttonShow = true
			} else if (deliveryStatus == 0) {
				this.buttonBeginShow = true
			}
			this.taskDId = json.e.lineData.dtdid
			this.shopId = json.e.lineData.shopid

			this.selectShopPackage(json);
			this.inItDictionary();
			//表格加载动画
			this.btnTxt = '开始验签'
		},
		onReady() {
			let that = this
			uni.getSystemInfo({
				success: (res) => { // 需要使用箭头函数，swiper 高度才能设置成功
					// res - 各种参数
					let info = uni.createSelectorQuery().select(".wrapper"); // 获取某个元素
					info.boundingClientRect(function(data) { //data - 各种参数
						let view = res.windowHeight - data.top
						that.heightContent = view
					}).exec()
				}
			});
		},
		methods: {

			call(mobileNumber) {
				uni.makePhoneCall({
					phoneNumber: mobileNumber
				})
			},
			backlast() {
				// uni.navigateBack({
				// 	delta: 1,
				// });
				uni.reLaunch({
					url: '/pages/distribution/distribution?scrollIntoView=v'+ this.i
				})
			},
			//表格
			onCellClick(e) {
				console.log("列表点击")
				console.log(e)
			},
			//多选框
			onCheck(e) {
				console.log("多选框点击")
				console.log(e)
			},
			// 关闭弹窗
			close(e) {
				let tableConfirm = this.$refs.tableConfirm
				tableConfirm.onTap()
			},
			// 取消授权
			onButtonClick(e) {
				if (e.lineData.qePrictureUrl != "" && e.lineData.qePrictureUrl != undefined) {
					this.imgurl = e.lineData.qePrictureUrl
				} else {
					this.imgurl = url() + '/wximg/confirm.jpg';
				}
				for (let i = 0; this.dictionaryList.length > i; i++) {
					if (this.dictionaryList[i].id == e.lineData.exceptionCode) {
						this.errerTypeText.exceptionCode = this.dictionaryList[i].d_name

						if (this.dictionaryList[i].d_name == "其它") {
							this.errerTypeText.exceptionDesc = e.lineData.exceptionDesc;
							this.errerTypeText.exceptionDescShow = true;
							break;
						} else {
							this.errerTypeText.exceptionDescShow = false;
						}

					}

				}
				let tableConfirm = this.$refs.tableConfirm
				tableConfirm.open()
				/* 	this.event = this.jsonShowFn(e)
					this.$refs.modal.showModal() */
			},
			// 取消授权的是和否点击事件
			sureEmpower() {
				let tableConfirm = this.$refs.tableConfirm
				tableConfirm.onTap()
			},
			cancelEmpower() {
				let tableConfirm = this.$refs.tableConfirm
				tableConfirm.onTap()
			},
			inItDictionary() {
				if (uni.getStorageSync('catchStatus')) { //离线
					let list = uni.getStorageSync('dictionaryList')
					list.forEach((item) => {
						this.dictionaryList.push(item);
					})
				} else {
					this.inItDictionaryOnline()
				}

			},
			inItDictionaryOnline() {
				let param = {
					d_type: "errerType"
				}
				let _this = this;
				dictionaryList(param).then(res => {
					if (res.code == 200) {
						res.map.data.forEach(function(item) {
							_this.dictionaryList.push(item);
						})

					} else {
						uni.showModal({
							title: '警告',
							content: 'code不符 请联系管理员',
							showCancel: false
						})
					}
				}).catch(err => {
					uni.showModal({
						title: '警告',
						content: '失败',
						showCancel: false
					})
				})
			},
			async selectShopPackage(json) {
				let thsi = this;
				let list
				let packageNumber


				if (uni.getStorageSync('catchStatus')) { //离线
					list = uni.getStorageSync('catchAll').data.map.allShopInfo[this.i].packages
					packageNumber = list.length; //渲染包裹个数
				} else { //在线
					this.name = json.name
					let param = {
						shopid: json.e.lineData.shopid,
						userid: json.userid
					}
					let tmp = await selectShopPackage(param)
					console.log(">>>>>>>>>>>", tmp)
					list = tmp.map.shopPackage
					packageNumber = tmp.map.shopPackage.length
				}



				list.forEach(function(item) {
					item.deliveryPackageRowList.forEach(function(items) {
						if (parseInt(items.commodityType) == 1) { //判断类型
							items.numtext = items.num + "条"
							thsi.cigaretteNumber = thsi.cigaretteNumber + parseInt(items.num)
						} else {
							items.numtext = items.num + "箱"
							thsi.cigaretteNumber = thsi.cigaretteNumber + (parseInt(items.num) * 10)
						}
						if (parseInt(items.commodityStatus) == 3) {
							thsi.abnormalNumber = thsi.abnormalNumber + 1
							items.listState = true;
							items.listColor = [{
								"element": 0,
								"color": "#ef0000"
							}, {
								"element": 1,
								"color": "#ef0000"
							}, {
								"element": 2,
								"color": "#ef0000"
							}, {
								"element": 3,
								"color": "#ef0000"
							}]
							items.commodityStatusName = "异常"
							items.look = '查看';
						} else if (parseInt(items.commodityStatus) == 2) {
							thsi.VerifiedNubmer = thsi.VerifiedNubmer + 1
							items.commodityStatusName = "验签"
						} else if (parseInt(items.commodityStatus) == 1) {
							items.commodityStatusName = "待验"
						} else if (parseInt(items.commodityStatus) == 4) {
							if (parseInt(items.commodityType) == 1) { //判断类型
								thsi.NonDeliveryNumber = thsi.NonDeliveryNumber + parseInt(items.num)
							} else {
								thsi.NonDeliveryNumber = thsi.NonDeliveryNumber + (parseInt(items
										.num) *
									10)
							}
							items.listState = true;
							items.listColor = [{
								"element": 0,
								"color": "#ef0000"
							}, {
								"element": 1,
								"color": "#ef0000"
							}, {
								"element": 2,
								"color": "#ef0000"
							}, {
								"element": 3,
								"color": "#ef0000"
							}]
							items.commodityStatusName = "未送达"
						} else if (parseInt(items.commodityStatus) == 5) {
							if (parseInt(items.commodityType) == 1) { //判断类型
								thsi.DeliveredNumber = thsi.DeliveredNumber + parseInt(items.num)
							} else {
								thsi.DeliveredNumber = thsi.DeliveredNumber + (parseInt(items.num) *
									10)
							}
							items.listState = true;
							items.listColor = [{
								"element": 0,
								"color": "#4e4eff"
							}, {
								"element": 1,
								"color": "#4e4eff"
							}, {
								"element": 2,
								"color": "#4e4eff"
							}, {
								"element": 3,
								"color": "#4e4eff"
							}]
							items.commodityStatusName = "已送达"
						}

					})
					thsi.contents.push(item);
				});
				this.wait(1000).then(() => {
					this.headers2 = this.headers.slice()
					this.contents2 = this.contents.slice()
					this.loading = false
				})
			},
			selectShopPackageOnline(json) { //配送人员查询
				this.name = json.name
				let param = {
					shopid: json.e.lineData.shopid,
					userid: json.userid
				};
				let thsi = this;
				selectShopPackage(param).then(res => {
					if (res.code == 200) {
						this.packageNumber = res.map.shopPackage.length; //渲染包裹个数
						res.map.shopPackage.forEach(function(item) {
							item.deliveryPackageRowList.forEach(function(items) {
								if (parseInt(items.commodityType) == 1) { //判断类型
									items.numtext = items.num + "条"
									thsi.cigaretteNumber = thsi.cigaretteNumber + parseInt(items
										.num)
								} else {
									items.numtext = items.num + "箱"
									thsi.cigaretteNumber = thsi.cigaretteNumber + (parseInt(items
										.num) * 10)
								}
								if (parseInt(items.commodityStatus) == 3) {
									thsi.abnormalNumber = thsi.abnormalNumber + 1
									items.listState = true;
									items.listColor = [{
										"element": 0,
										"color": "#ef0000"
									}, {
										"element": 1,
										"color": "#ef0000"
									}, {
										"element": 2,
										"color": "#ef0000"
									}, {
										"element": 3,
										"color": "#ef0000"
									}]
									items.commodityStatusName = "异常"
									items.look = '查看';
								} else if (parseInt(items.commodityStatus) == 2) {
									thsi.VerifiedNubmer = thsi.VerifiedNubmer + 1
									items.commodityStatusName = "验签"
								} else if (parseInt(items.commodityStatus) == 1) {
									items.commodityStatusName = "待验"
								} else if (parseInt(items.commodityStatus) == 4) {
									if (parseInt(items.commodityType) == 1) { //判断类型
										thsi.NonDeliveryNumber = thsi.NonDeliveryNumber + parseInt(
											items.num)
									} else {
										thsi.NonDeliveryNumber = thsi.NonDeliveryNumber + (
											parseInt(items.num) * 10)
									}
									items.listState = true;
									items.listColor = [{
										"element": 0,
										"color": "#ef0000"
									}, {
										"element": 1,
										"color": "#ef0000"
									}, {
										"element": 2,
										"color": "#ef0000"
									}, {
										"element": 3,
										"color": "#ef0000"
									}]
									items.commodityStatusName = "未送达"
								} else if (parseInt(items.commodityStatus) == 5) {
									if (parseInt(items.commodityType) == 1) { //判断类型
										thsi.DeliveredNumber = thsi.DeliveredNumber + parseInt(
											items.num)
									} else {
										thsi.DeliveredNumber = thsi.DeliveredNumber + (parseInt(
											items.num) * 10)
									}
									items.listState = true;
									items.listColor = [{
										"element": 0,
										"color": "#4e4eff"
									}, {
										"element": 1,
										"color": "#4e4eff"
									}, {
										"element": 2,
										"color": "#4e4eff"
									}, {
										"element": 3,
										"color": "#4e4eff"
									}]
									items.commodityStatusName = "已送达"
								}

							})
							thsi.contents.push(item);
						});
						// let sList = res.map.shopPackage
						// console.log(sList);
						// {id: '1',quantity: '99',vehicle: '异常',look:'查看',listState:true,
						// listColor:[{"element":0,"color":"#ef0000"},{"element":1,"color":"#ef0000"},{"element":2,"color":"#ef0000"},{"element":3,"color":"#ef0000"},], 
						// },
						// for(let i=0;i<sList.length;i++){
						// 	let stylelist = sList[i]
						// 	console.log(sList[i].commodityName);
						// 	if(sList[i].commodityStatus=='1'){
						// 		stylelist.listState = true
						// 		stylelist.listColor = [{"element":0,"color":"#007457"},{"element":1,"color":"#007457"},{"element":2,"color":"#007457"},{"element":3,"color":"#007457"},]
						// 	}else if(sList[i].commodityStatus=='3'){
						// 		stylelist.listState = true
						// 		stylelist.look = '查看'
						// 		stylelist.listColor = [{"element":0,"color":"#ef0000"},{"element":1,"color":"#ef0000"},{"element":2,"color":"#ef0000"},{"element":3,"color":"#ef0000"},]
						// 	}

						// 	if(parseInt(sList[i].commodityType)==1){//判断类型
						// 		sList[i].numtext=sList[i].numbe+"/条"
						// 	}else{
						// 		sList[i].numtext=sList[i].numbe+"/箱"
						// 	}
						// 	this.contents.push(stylelist)
						// 	this.packageCode = sList[i].packageCode
						// }

						this.wait(1000).then(() => {
							this.headers2 = this.headers.slice()
							this.contents2 = this.contents.slice()
							this.loading = false
						})

					} else {
						uni.showModal({
							title: '警告',
							content: 'code不符 请联系管理员',
							showCancel: false
						})
					}
				}).catch(err => {
					console.log(err);
					uni.showModal({
						title: '警告',
						content: '失败',
						showCancel: false
					})
				})
			},
			//下拉框
			bindPickerChange: function(e) { //改变的事件名
				this.index = e.target.value //将数组改变索引赋给定义的index变量
				// console.log(e.target.value)
				// console.log(this.array[this.index])
			},

			beginDelivery() { //点击申请调配
				if (this.bv == 0) {
					let param = {
						id: this.taskDId,
						type: '1'
					};
					beginDelivery(param).then(res => {
						if (res.code == 200) {
							if (res.map.i > 0) {
								//beforePage.onLoad();
								uni.reLaunch({
									url: '/pages/distribution/distribution',
								})
								uni.showModal({
									title: '开始配送',
									content: '',
									showCancel: false
								})
								//user=service.getUsers().user;
								//this.init();
								//service.getposition(this.carid,this.taskid);
							} else {
								uni.showModal({
									title: '暂时无法配送',
									content: '',
									showCancel: false
								})
							}

						} else {
							uni.showModal({
								title: '暂时无法配送',
								content: '',
								showCancel: false
							})
						}
					}).catch(err => {
						console.log(err);
						uni.showModal({
							title: '暂时无法配送',
							content: '',
							showCancel: false
						})
					})
				} else if (this.bv == 3) {
					uni.showModal({
						title: '未装车无法配送',
						content: '请先确认装车',
						showCancel: false
					})
				}
			},

			//选择图片
			uploadImg() {
				var that = this;
				let maxSize = 400;
				let dWidth = uni.getSystemInfoSync().windowWidth;
				uni.chooseImage({
					count: 1, //默认9
					sourceType:['camera'],
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					success: function(res) {
						that.btnTxt = '开始压缩'
						uni.showLoading({
							title: '开始压缩',
							mask: true
						});
						let imageSrc = res.tempFilePaths[0];
						that.imageUrl = imageSrc
						console.log(that.imageUrl)
						that.openUpdate()
					}
				});

			},

			urlToBase64(url) {
				this.btnTxt = '开始转码'
				console.log(url);
				var that = this;
				// let reader
				pathToBase64(url) 
				  .then(e => {
					  // console.log(e)
					  // let base64 = e
					  this.imageUrl = e
				      that.updateImage();
				  })
				  .catch(error => {
				    console.error(error)
					uni.hideLoading()
					uni.showModal({
						title: '',
						content: 'base64转换失败，请重新上传图片',
						showCancel: false
					})
					this.btnTxt = '开始验签'
				})
			},

			// upload(base64){//初始化列表
			// 	let  param={
			// 		base:base64
			// 	};
			// 	uploadBaseImage(param).then(res => {
			// 		if (res.code == 200) {
			// 			console.log(res)
			// 			this.imageUrl = base64;
			// 		} else{
			// 			uni.showModal({
			// 				title: '警告',
			// 				content: 'code不符 请联系管理员',
			// 				showCancel: false
			// 			})
			// 		}
			// 	}).catch(err => {
			// 		console.log(err);
			// 		uni.showModal({
			// 			title: '警告',
			// 			content: '失败',
			// 			showCancel: false
			// 		})
			// 	})

			// },




			handupdate() {
				// anchor.wos
				// let qxPop = this.$refs.qxPop
				// qxPop.open()

				// if (this.btnTxt === '确定'){
				// 	this.updateImage()
				// 	return false
				// }else{
				// 	this.uploadImg()  
				// }

				this.uploadImg()

			},
			// updatestatus(){//配送人员自行调整配送状态(原版已送达未送达状态验签)
			// 	let status = 0;
			// 	if(this.index == 0){
			// 		uni.showToast({
			// 			title: '请选择状态 !',
			// 			icon: 'none'
			// 		});
			// 		return ;
			// 	}else if(this.index == 1){
			// 		status = 4;
			// 	}else if(this.index == 2){
			// 		status = 5;
			// 	}
			// 	if(this.remark.length==0){
			// 		uni.showToast({
			// 			title: '请输入备注 !',
			// 			icon: 'none'
			// 		});
			// 		return ;
			// 	}

			// 	let  param={
			// 		shopId:this.shopId,
			// 		taskId:this.taskId,
			// 		deliveryStatus:status,
			// 		remark:this.remark,
			// 	};
			// 	updatestatus(param).then(res => {
			// 		if (res.code == 200) {
			// 			let qxPop = this.$refs.qxPop
			// 			qxPop.onTap()
			// 			uni.redirectTo({
			// 				url: '/pages/distribution/distribution',
			// 			})
			// 		}
			// 	}).catch(err => {
			// 		console.log(err);
			// 		uni.showModal({
			// 			title: '保存失败',
			// 			content: '',
			// 			showCancel: false
			// 		})
			// 	})
			// },

			openUpdate() {
				console.log(this.imageUrl);
				//配送员当前经纬度获取
				let _that = this
				this.longitude = "1"
				this.latitude = '2'
				this.isTrue()
				// uni.getLocation({
				// 	type: 'wgs84', //注意啊，这里不是高德的
				// 	success: function(res) {
				// 		console.log('aksjdfljalkfdja')
				// 		_that.longitude = res.longitude;
				// 		_that.latitude = res.latitude;
				// 		// console.log('当前位置的经度：' + res.longitude);
				// 		// console.log('当前位置的纬度：' + res.latitude);
				// 		_that.isTrue();
				// 	}
				// });

			},

			isTrue() {
				console.log('>>>>>>', this.imageUrl);
				let that = this;
				if (that.imageUrl == '' || that.imageUrl == null) {
					uni.showToast({
						title: '请上传图片!',
						icon: 'none'
					});
					return;
				} else {
					that.urlToBase64(that.imageUrl);
				}
			},

			// 判断图片大小是否满足需求
			imageSizeIsLessLimitSize(imagePath, limitSize, lessCallBack, moreCallBack) {
				let that = this;
				uni.getFileInfo({
					filePath: imagePath,
					success(res) {
						console.log(imagePath);
						that.imageUrl = imagePath;
						console.log("压缩前图片大小:", res.size / 1024, 'kb');
						if (res.size > 1024 * limitSize) {
							console.log(11);
							moreCallBack();
						} else {
							console.log(22);
							lessCallBack();
						}
					}
				})
			},
			/**
			 * 获取画布图片 
			 */
			// 利用cavas进行压缩  每次压缩都需要ctx.draw()  wx.canvasToTempFilePath()连用
			getCanvasImage(canvasId, imagePath, imageW, imageH, getImgsuccess) {
				let that = this;
				const ctx = uni.createCanvasContext(canvasId);
				ctx.drawImage(imagePath, 0, 0, imageW, imageH);
				ctx.draw(false, setTimeout(function() { // 一定要加定时器，因为ctx.draw()应用到canvas是有个时间的
					uni.canvasToTempFilePath({
						canvasId: canvasId,
						x: 0,
						y: 0,
						width: imageW,
						height: imageH,
						quality: 1,
						success: function(res) {
							console.log("ceshi" + that.imageUrl);
							that.imageUrl = res.tempFilePath;
							console.log("开始" + that.imageUrl);
							//保存到本地相册
							//  wx.saveImageToPhotosAlbum({
							//   filePath: res.tempFilePath,
							//   success: (res) => {
							//  console.log(res)
							//   },
							//   fail: (err) => {
							//  console.error(err)
							//   }
							// })
							getImgsuccess(res.tempFilePath);
							console.log("结束" + that.imageUrl);
						},
					});
				}, 200));
			},

			// 主调用方法

			/**
			 * 获取小于限制大小的Image, limitSize默认为100KB，递归调用。
			 */
			getLessLimitSizeImage(canvasId, imagePath, limitSize = 100, drawWidth, callBack) {
				var that = this;
				that.imageSizeIsLessLimitSize(imagePath, limitSize,
					(lessRes) => {
						callBack(imagePath);
					},
					(moreRes) => {
						uni.getImageInfo({
							src: imagePath,
							success: function(imageInfo) {
								var maxSide = Math.max(imageInfo.width, imageInfo.height);
								//画板的宽高默认是windowWidth
								var windowW = drawWidth;
								var scale = 1;
								if (maxSide > windowW) {
									scale = windowW / maxSide;
								}
								var imageW = Math.trunc(imageInfo.width * scale);
								var imageH = Math.trunc(imageInfo.height * scale);
								console.log('调用压缩', canvasId, imagePath, imageW, imageH);
								that.getCanvasImage(canvasId, imagePath, imageW, imageH,
									(pressImgPath) => {
										that.getLessLimitSizeImage(canvasId, pressImgPath, limitSize,
											drawWidth * 0.95, callBack);
									}
								);
							}
						})
					}
				)
			},
			updateImage() {
				if (!uni.getStorageSync('catchStatus')) {
					this.updateImageOnline()
					return false
				}
				uni.showLoading({
					title: '保存',
					mask: true
				})
				let that = this
				let stroageName = 'img-' + new Date().getTime()
				uni.setStorageSync(stroageName, this.imageUrl)
				let param = {
					id: this.taskDId,
					// receiveUserName: this.imageUrl,
					stroageName:stroageName,
					receiveUserName:"",
					longitude: this.longitude,
					latitude: this.latitude,
					remark: this.remark,
					fid: that.i
				};
				// console.log( uni.getStorageSync('catch').data.map.allShopInfo )
				// return false
				let tmp = uni.getStorageSync('catch')

				tmp.data.map.allShopInfo[that.i].task = param
				tmp.data.map.allShopInfo[that.i].deliveryStatus = 5

				uni.setStorage({
					key: 'catch',
					data: tmp,
					success: () => {
						uni.redirectTo({
							url: '/pages/distribution/distribution?scrollIntoView=v'+ that.i
						})
					},
					fail: () => {
						uni.showModal({
							title: '提示',
							content: '无法保存离线任务，请清理任务!',
							showCancel: false
						})
					},
					complete: () => {
						uni.hideLoading()
					}
				})


			},
			updateImageOnline() {
				uni.showLoading({
					title: '上传中',
					mask: true
				})
				let param = {
					id: this.taskDId,
					receiveUserName: this.imageUrl,
					longitude: this.longitude,
					latitude: this.latitude,
					remark: this.remark
				};
				undateTaskImg(param).then(res => {
					if (res.code == 200) {
						uni.redirectTo({
							url: '/pages/distribution/distribution',
						})
						uni.hideLoading()
						uni.showModal({
							title: '上传成功',
							content: '',
							showCancel: false
						})
						this.btnTxt = '开始验签'
					} else {
						uni.hideLoading()
						uni.showModal({
							title: '验签异常',
							content: '',
							showCancel: false
						})
						this.btnTxt = '开始验签'
					}
				}).catch(err => {
					uni.hideLoading()
					console.log(err);
					uni.showModal({
						title: '系统错误',
						content: '',
						showCancel: false
					})
					this.btnTxt = '开始验签'
				})
				let qxPop = this.$refs.qxPop
				qxPop.onTap()
			},

			close() {
				let qxPop = this.$refs.qxPop
				qxPop.onTap()
			},

			wait(time) {
				return new Promise(resolve => {
					setTimeout(() => {
						resolve()
					}, time)
				})
			}
		}

	}
</script>

<style scoped>
	.backs {
		position: absolute;
		z-index: 11111;
		top: 85upx;
		left: 30upx;
		display: flex;
		color: #000;
		line-height: 30upx;
		align-items: center;
		display: inline-block;
	}

	/* 上传图片 */
	.update {
		border: solid 1px #e6e7e8;
		background-color: #fff;
		border-radius: 10upx;
		width: 202upx;
		height: 202upx;
		margin: 10px 0;
		display: flex;
		flex: 1;
		/*设置容器内部容器的排列方向*/
		flex-direction: column;
		align-items: center;
		justify-content: center
	}

	.update .upImg {
		width: 80%;
		height: 80%;
		margin: 0 auto;
		padding: 0;
	}





	.backs image {
		width: 45upx;
		height: 45upx;
		margin-right: 14upx;
	}

	.titleNview-background {
		width: 100%;
		height: 418upx;
		-webkit-transition: .4s;
		transition: .4s;
		background-size: 100% 100%;
		position: relative;
	}

	.wrapper {
		position: relative;
		width: 91%;
		margin: 0 auto;
		z-index: 2;
		border-top-left-radius: 27upx;
		border-top-right-radius: 27upx;
		background-color: #fff;
	}

	/*弹窗*/
	.popup-info {
		position: fixed;
		min-width: 80%;
		max-width: 80%;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		font-size: 30upx;
		border-radius: 27upx;
		background-color: #fff;
		z-index: 9999;
	}

	/*配送车牌号*/
	.text-box {
		position: absolute;
		color: #fff;
		bottom: 50upx;
		left: 5%;
		width: 91%;
		z-index: 2;
		font-size: 32upx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.text-box button {
		float: left;
		margin-left: 10upx;
	}

	.pesBtn {
		border-radius: 10upx;
		background-color: #ffc562;
		font-size: 28upx;
		color: #fff;
	}

	.pesBtn-hover {
		border-radius: 10upx;
		background-color: #db760d;
	}

	.pesBtnGray {
		background: #ecedf1;
		color: #666;
	}

	/* 表格 */
	.tableBox {
		width: 100%;
		padding-bottom: 40upx;
		margin-top: 44upx;
	}

	.tabletitle {
		border-top-left-radius: 27upx;
		border-top-right-radius: 27upx;
		background-color: #007457;
		height: 98upx;
		width: 100%;
		text-align: center;
		line-height: 98upx;
		color: #fff;
		font-size: 32upx;
	}

	.searchBox {
		width: 80%;
		padding: 0 5%;
		height: 72upx;
		background-color: #fff;
		border-radius: 200upx;
		box-shadow: 0 2px 5px #e3e3e3;
		border: solid 1px #007457;
		position: relative;
		margin: 40upx auto;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.table {
		width: 96%;
		margin: 0 auto;
		/* 下方的灰色分割线 */
		border-bottom: solid 14upx #eee;
		padding-bottom: 40upx;
		margin-bottom: 40upx;
	}

	/*包裹ID及包裹编号*/
	.bgName {
		padding: 20upx 0;
		line-height: 40upx;
		display: flex;
		justify-content: space-between;
		word-wrap: break-word;
		white-space: normal;
		word-break: break-all;
		border-bottom: solid 1px #eee;
	}

	/* 确认配送结果 btn */
	.Confirm-delivery {
		background-color: #ffc562;
	}

	.Confirm-delivery-hover {
		background-color: #db760d;
	}

	.Confirm-delivery,
	.Confirm-delivery-hover {
		border-radius: 200upx;
		margin: 80upx auto;
		box-shadow: 0 2px 5px #e3e3e3;
	}

	.Confirm-delivery:after {
		border: none;
	}

	/* 是否确认取消弹窗 */
	.popup-info {
		position: fixed;
		min-width: 80%;
		max-width: 80%;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		font-size: 30upx;
		border-radius: 27upx;
		background-color: #fff;
		z-index: 9999;
	}

	.popuptitle {
		border-top-left-radius: 27upx;
		border-top-right-radius: 27upx;
		background-color: #007457;
		height: 98upx;
		width: 100%;
		text-align: center;
		line-height: 98upx;
		color: #fff;
		font-size: 36upx;
		letter-spacing: 2px;
	}

	.close {
		position: absolute;
		top: -75upx;
		left: 10upx;
	}

	.close image {
		width: 37upx;
		height: 37upx;
	}

	.imgWra {
		width: 80%;
		margin: 80upx auto;
	}

	.up-check {
		width: 500upx;
		height: 500upx;
	}

	.up-check image {
		width: 100%;
		height: 100%;
	}

	/* 弹窗按钮 */
	.btnPat {
		width: 100%;
		display: flex;
		flex: 1;
		flex-direction: row;
	}

	.btn {
		width: 60%;
		background-color: #ffc562;
		border-radius: 100upx;
		margin: 30upx auto;
		box-shadow: 0 2px 5px #e3e3e3;
		color: #fff;
		line-height: 80rpx;
	}

	.btn::after {
		border: none;
	}

	.xinxiBox {
		width: 90%;
		padding: 20rpx 5%;
		position: relative;
		margin: 0 auto;
	}

	.xinxiBox label {
		line-height: 60rpx;
		font-size: 32rpx;
	}

	.xinxiBox .xxstart {
		color: red;
		margin-right: 10rpx;
	}

	.xinxiNr {
		display: flex;
		flex-direction: row;
		min-height: 80rpx;
		font-size: 32rpx;
	}
</style>
